<template>
    <h1>会员修改</h1>
    <table class="table table-bordered">
        <tr>
            <td>姓名</td>
            <td>{{ state.mname }}</td>
        </tr>
        <tr>
            <td>积分</td>
            <td>
                <input type="text" v-model="state.total">
            </td>
        </tr>
        <tr>
            <td>余额</td>
            <td>
                <input type="text" v-model="state.totalPrice">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="确认修改" @click="updcon">
            </td>
        </tr>
    </table>
  </template>
  
  <script setup lang="ts">
  //reactive实现响应式数据的方式
  import {onMounted, reactive, toRefs} from 'vue'
  import {useRoute, useRouter} from 'vue-router'
  import axios from 'axios'
//页面跳转并且传参
  const router=useRouter();
  //route路由器对象 接收参数
  const route=useRoute();

  let data:any=reactive({
    state:[]
  })
  let{state} =toRefs(data)
  console.log(data)

  onMounted(()=>{
    getfill()
  })

  const getfill:any=()=>{
    let obj={
        id:route.query.id
    }
    console.log(obj)
    axios({
        url:'/api/Member/Seleciid',
        method:'get',
        params:obj
    })
    .then(res=>{
        console.log(res)
        //将后端返回来的数据放到state存储
        state.value=res.data.data;
    })
    .catch(err=>{
        console.log(err)
    })
  }

  const updcon=()=>{
    if(state.value.total==""){
        alert("积分不能为空")
        return;
    }
    if(state.value.totalPrice==""){
        alert("余额不能为空")
        return;
    }
    let obj={
        "id":route.query.id,
        "mname": state.value.mname,
  "phone": state.value.phone,
  "idcard": state.value.idcard,
  "total": state.value.total,
  "totalPrice": state.value.totalPrice,
    }
    axios({
        url:'/api/Member/Update',
        method:'post',
        data:obj
    })
    .then(res=>{
        console.log(res)
        if(res.data.data==1){
            alert("修改成功")
            router.push("/list")
        }else{
            alert("修改失败")
        }
    })
    .catch(err=>{
        console.log(err)
    })
  }
  </script>
  
  <style scoped>
  
  </style>